<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //多个div移入后渐变的效果

        window.onload = function () {

            let initOpacityVal = 0.1;
            let aDiv = document.getElementsByClassName('div');

            for (let i = 0; i < aDiv.length; i++) {
                let oDiv = aDiv[i];
                oDiv.timer = null;

                oDiv.onmouseenter = function () {
                    console.log(typeof oDiv.offset);


                    clearInterval(oDiv.timer);
                    // console.log(oDiv.style['opacity']);  //如果是通过style设定的话,第一次必定是undefined,没有办法读取透明度
                    changeDiv(oDiv,initOpacityVal,1,'opacity');

                };

                oDiv.onmouseleave = function () {
                    clearInterval(oDiv.timer);
                    //console.log(oDiv.style['opacity']);   //但第二次就不会了,因为移入时js设置了行间样式
                    changeDiv(oDiv,oDiv.style['opacity'],initOpacityVal,'opacity');
                };
            }



        };

        //渐变的框架,可以适配透明度和带px的属性; 传入当前div对象,当前属性值,目标属性值,需改变属性,最后是渐变速率(呈反比)
        function changeDiv(oDiv,currentVal,targetVal,prop,denominator = 5) {
            currentVal = parseFloat(currentVal);    //因为从oDiv.style['opacity']获取出来的值是string...

            oDiv.timer = setInterval(function () {
                if (currentVal !== targetVal) {

                    if (prop === 'opacity') {
                        //处理透明度,因为透明度是[0,1],所以乘以100
                        let speed = targetVal > currentVal ?
                            Math.ceil((targetVal*100 - currentVal*100)/denominator) : Math.floor((targetVal*100 - currentVal*100)/denominator);
                        currentVal += speed/100 ;
                        oDiv.style[prop] = currentVal;

                        //因为是小数很难让2者完全相等,所以设置当到精度0.0001时使2者相等
                        if (Math.abs(currentVal - targetVal )<=0.0001) currentVal = targetVal;

                    }else {
                        //处理带px的属性
                        let speed = targetVal > currentVal ?
                            Math.ceil((targetVal - currentVal)/denominator) : Math.floor((targetVal - currentVal)/denominator);
                        oDiv.style[prop] = currentVal + speed + 'px';
                    }
                }else {
                    clearInterval(oDiv.timer);
                }
            },25);
        }



    </script>

    <style>
        .div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            opacity: 0.1;
        }

    </style>
</head>

<body>

<div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>



</div>
<div style="background: red;width: 200px;height: 200px;position: absolute; top: 300px; margin: 20px;"><span>对比</span></div>

</body>
</html>